<template>
<div>
  <el-table
      :data="tableData"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
        prop="name"
        label="栏目名称"
        width="250">
      </el-table-column>
      <el-table-column
        prop="relationship"
        label="当前对应关系"
        width="180">
      </el-table-column>
      
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button type="success">查看</el-button>
          <el-button type="warning" size="small"  
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="open()">删除</el-button>
        </template> 
      </el-table-column>
    </el-table>
<!-- 弹出框 -->
  <el-dialog title="编辑" :visible.sync="editFormVisible":close-on-click-modal="false"
                 class="edit-form">
      
          <el-form :model="editForm" label-width="100px" ref="editForm">
            <el-form-item label="栏目名称" prop="name">
              <el-input v-model="editForm.name" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="当前对应关系" prop="relationship">
              <el-input v-model="editForm.relationship" auto-complete="off"></el-input>
            </el-form-item>
          </el-form>
            <div slot="footer" class="dialog-footer">
            </div>
        </el-dialog>
</div>
</template>
<script>
  export default {
    
  methods: {
    deleteRow(index, rows) {
        rows.splice(index, 1);
      },
  //弹出框改变表格数据
    handleCurrentChange:function () {
      this.tableData.push({name:this.editForm.name,relationship:this.editForm.relationship});
    },
        //删除最后一行数据
    delRow(index, row){
      this.tableData.splice(this.tableData.indexOf(row),1);
    },
        //删除当前行数据
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
      //编辑
    handleEdit: function (index, row) {
      this.editFormVisible = true;//dialog对话窗口打开
      this.editForm = Object.assign({}, row);//将数据传入dialog页面
      this.editForm.index=index;//传递当前index
    },
      //取消
    handleCancel(formName) {
      this.editFormVisible = false;
    },
     //更新
    handleUpdate(forName) {
      //dialog页面数据写入到tableData页面上
      //this.$set(tableName,talbeIndex,data)
      this.$set(this.tableData,this.editForm.index,{name:this.editForm.name,relationship:this.editForm.relationship});
      this.editFormVisible = false;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    changeSwitch (data) {
      console.log(data)
    },
    //删除确认
    open() {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(action => {
              if (action === 'confirm') {
                this.deleteRow(scope.$index, tableData)
          }
        }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });          
            });
          },


//添加
 add() {
      for (let i of this.tableData) {
        if (i.isSet) return this.$message.error("请先保存当前编辑项");
      }
      let j = {
        index: "",
        OutdoorTDB: "",
        IndoorTDB: "",
        TdbStartTime: "",
        TdbEndTime: "",
        isSet: true
      };
      this.master_user.data.push(j);
      this.master_user.sel = JSON.parse(JSON.stringify(j));
    }    
   },
    data() {
      return {
        editForm: {
        name: '',
        relationship: '',
        index:0
        },
        //定义属性
        name:undefined,
        realation:undefined,
        //默认dialog弹窗不打开（true打开，false为不打开）
        editFormVisible: false,
        tableData: [{
          id: 1,
          name: '首页',
          on:'0',
          relationship:'网页'
        }, {
          id: 2,
          name: '关于我们',
          relationship:'栏目',
          children: [{
              id: 21,
              name: '国际学院概况',
              relationship:'文章'
            }, {
              id: 22,
              name: '院长寄语',
              relationship:'文章'
          }, {
              id: 23,
              name: '机构设置',
              relationship:'网页'
          }]
        }, {
          id: 3,
          name: '留学川农',
          relationship:'栏目',
          children: [{
              id: 31,
              name: '项目类型',
              relationship:'栏目',
              children:[
                {
                    id:311,
                    name:'本科生项目',
                    relationship:'文章列表',
                },
                {
                  id: 312,
                  name: '研究生项目',
                  relationship:'文章列表'
                }, {
                  id: 313,
                  name: '汉语言生项目',
                  relationship:'文章列表'
               },{
                  id: 314,
                  name: '预科项目',
                  relationship:'文章列表'
               },{
                  id: 315,
                  name: '短期培训项目',
                  relationship:'文章列表'
               }]
            },
            {
              id: 32,
              name: '在线申请',
              relationship:'栏目',
              children:[
                {
                  id: 321,
                  name: '在线申请系统',
                  relationship:'文章列表'
                },{
                    id: 322,
                    name: '在线系统使用说明',
                    relationship:'文章列表'
                },{
                    id: 323,
                    name: '奖学金',
                    relationship:'文章列表'
                  },{
                    id: 324,
                    name: '规章制度',
                    relationship:'文章列表'
                  },{
                    id: 325,
                    name: '下载专区',
                    relationship:'文件列表'
				  }
			  ]
          },]
        }, {
          id: 4,
          name: '研究中心',
          relationship:'栏目',
          children: [{
              id: 41,
              name: '四川农业大学简介',
              relationship:'文章'
            }, {
              id: 42,
              name: '重点学科',
              relationship:'文章'
          }, {
              id: 43,
              name: '科研平台',
              relationship:'网页'
          }]
        }, {
          id: 5,
          name: '合作办学',
          relationship:'栏目',
          children: [{
              id: 51,
              name: '项目专栏',
              relationship:'文章'
            }, {
              id: 52,
              name: '申请流程',
              relationship:'文章列表'
          }, {
              id: 53,
              name: '政策法规',
              relationship:'文章列表'
          }, {
              id: 54,
              name: '常见问题',
              relationship:'文章列表'
          }]
        }, {
          id: 6,
          name: '培训中心',
          relationship:'栏目',
          children: [{
              id: 61,
              name: '中心概况',
              relationship:'文章'
            }, {
              id: 62,
              name: '中外专家联合',
              relationship:'文章列表'
          }, {
              id: 63,
              name: '项目宣传',
              relationship:'文章列表'
          }, {
              id: 64,
              name: '项目列表',
              relationship:'图文列表'
          }]
        }, {
          id: 7,
          name: '校园生活',
          relationship:'栏目',
          children: [{
              id: 71,
              name: '校园生活',
              relationship:'图文列表'
            }, {
              id: 72,
              name: '学员风采',
              relationship:'图文列表'
          }, {
              id: 73,
              name: '校历',
              relationship:'图片'
          }]
        }, {
          id: 8,
          name: '联系我们',
          relationship:'网页'
        }]          
    }
 }
  }
</script>
<style>
.el-table-add-row{
  float: right;
  position: relative;
  right:50px;
  padding-bottom: 20px;
}
</style>
